<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业练习</title>
    <style type="text/css">
        .triangle{
            height: 0;
            width: 0;
            border-left: 80px solid transparent;
            border-right: 80px solid transparent;
            border-bottom: 80px solid greenyellow;
            border-top: 80px solid transparent;
        }

        .triangle_top{
            position: relative;
            top: -80px;
            height: 0;
            width: 0;
            border-left: 80px solid transparent;
            border-right: 80px solid transparent;
            border-bottom: 80px solid greenyellow;
            border-top: 80px solid transparent;
        }

        .retangle {
            position: relative;
            top: -80px;
            right: -70px;
            width: 20px;
            height: 70px;
            background: saddlebrown;
        }

        .triangle_house {
            position: relative;
            top: -350px;
            right: -300px;
            height: 0;
            width: 0;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 100px solid red;
            border-top: 100px solid transparent;
        }

        .square {
            position: relative;
            top: -350px;
            right: -300px;
            width: 200px;
            height: 180px;
            background: greenyellow;
            box-sizing: border-box;
        }

        .square1 {
            position: relative;
            top: -530px;
            right: -300px;
            width: 40px;
            height: 40px;
            background: yellow;
            box-sizing: border-box;
        }

        .square2 {
            position: relative;
            top: -570px;
            right: -342px;
            width: 40px;
            height: 40px;
            background: yellow;
            box-sizing: border-box;
        }

        .square3 {
            position: relative;
            top: -568px;
            right: -300px;
            width: 40px;
            height: 40px;
            background: yellow;
            box-sizing: border-box;
        }

        .square4 {
            position: relative;
            top: -608px;
            right: -342px;
            width: 40px;
            height: 40px;
            background: yellow;
            box-sizing: border-box;
        }

        .retangle1 {
            position: absolute;
            margin-top: -630px;
            margin-left: 400px;
            width: 100px;
            height: 120px;
            background: pink;
        }

        .retangle2 {
            position: absolute;
            margin-top: -790px;
            margin-left: 430px;
            width: 20px;
            height: 50px;
            background: grey;
        }

        .parallelogram {
            position: absolute;
            margin-top: -750px;
            margin-left: 455px;
            width: 30px;
            height: 30px;
            -webkit-transform: skew(20deg, 10deg);
            -moz-transform:skew(20deg, 10deg);
            transform: skew(20deg, 10deg);
            background: navajowhite;
        }

        .moon {
            position: absolute;
            margin-top: -830px;
            margin-left: 650px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            box-shadow: 15px 15px 0 0 yellow;
        }


    </style>
</head>
<body>
    <div class="triangle"></div>
    <div class="triangle_top"></div>
    <div class="retangle"></div>
    <div class="triangle_house"></div>
    <div class="square"></div>
    <div class="square1"></div>
    <div class="square2"></div>
    <div class="square3"></div>
    <div class="square4"></div>
    <div class="retangle1"></div>
    <div class="retangle2"></div>
    <div class="parallelogram"></div>
    <div class="moon"></div>
</body>
</html>